<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <style type="text/css">
        div {height: 80px;width: 500px;border: 1px solid #ccc}
    </style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2" class="cc">d2</div>
<input value="input0">
<div id="d3" class="cc">d3
    <input value="input1">
    <p> <input value="inputp"></p>
</div>
<input value="input2">
<input value="input3">
<script type="text/javascript">
//选择器 id class tag 属性 层级
    //$("#d1").css("background-color","red");
    //$(".cc").css("background-color","green");
    // div中的后代input
   // $("div input").css("background-color","green");
//div和input
//$("div,input").css("background-color","green");
//和div同级的兄弟节点
//$("div~input").css("background-color","green");
//div的子节点
//$("div>input").css("background-color","green");

    $("div.cc").css("background-color","green");//<div class="cc">
    $("div .cc").css("background-color","green");//<div><input class="cc"></div>
    $("div,.cc").css("background-color","green");//div和class=cc的所有元素
</script>

</body>
</html>
